<template>
    <div class=" mx-auto mt-8rem mw-800px">
        <div class="card card0 ">
            <div class="row d-flex">
                <div class="col-6 ml-3 p-2rem">
                    <img src="/assets/logo.png" class="w-400px h-282px">
                </div>
                <div class="col-5">
                    <div class="mt-3rem p-1.5rem">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="email" class="form-control" v-model="username" placeholder="请输入用户名">

                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" class="form-control" v-model="password" placeholder="请输入密码">
                        </div>

                        <button type="button" @click="doLogin" class="btn btn-block btn-primary">登录</button>
                    </div>
                </div>
            </div>
            <div class="bg-blue py-4">
                <div class="row px-3">
                    <small class="ml-4 ml-sm-5 mb-2">版权所有 &copy; 2024. 所有权保留.</small>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import { useLoginStore } from '../../store';
import { AdminUserApi } from '../../api/admin-user';
const api = new AdminUserApi;
export default {
    name: "Login",
    data() {
        return {
            username: "",
            password: ""
        }
    },
    methods: {
        async doLogin() {
            const loader = this.$loading.show();
            try {
                const userInfo = await api.doLogin({ username: this.username, password: this.password });
                const store = useLoginStore();
                if (userInfo.success) {
                    Reflect.deleteProperty(userInfo, "store_pass");
                    store.logonId = userInfo.data.name;
                    store.user_type = userInfo.data.user_type;
                    store.group_id = userInfo.data.group_id;
                    store.group_name = userInfo.data.group_name;
                    this.$router.push({ name: 'home' });
                } else {
                    this.$message.error({ message: userInfo.message, duration: 1500 });
                }
                loader.hide();
            } catch (error) {
                loader.hide();
                this.$message.error(error);
            }
        }
    }

}
</script>
<style scoped>
body {
    color: #000;
    overflow-x: hidden;
    background-color: #B0BEC5;
    background-repeat: no-repeat;
}

.card0 {
    box-shadow: 0px 2px 4px 0px #50585e;
    border-radius: 0px;
}

.card2 {
    margin: 0px 40px;
}

.border-line {
    border-right: 1px solid #EEEEEE;
}
</style>